<template>
  <div id="Search">
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="value"
        show-action
        :placeholder="hotword"
        @input="inputSearch"
        @cancel="$router.back()"
        @search="onSearch"
      />
    </form>
    <!-- 搜索结果 -->
    <div class="search-result" v-show="value.trim().length">
      <van-cell
        :title="item.title"
        v-for="item in searchResult"
        :key="item._id"
        @click="searchResultTap(item.title)"
      >
      </van-cell>
    </div>
    <!-- 历史记录 -->
    <div class="search-history">
      <van-cell title="搜索历史">
        <div @click="Delete">
          <span>全部删除</span>
          <van-icon name="delete" />
        </div>
      </van-cell>
      <van-cell
        :title="item"
        @click="historyTap(item)"
        :key="item"
        v-for="(item, index) in searchHistory"
      >
        <van-icon name="close" @click.stop="del(index)" />
      </van-cell>
    </div>
  </div>
</template>


<script>
import { Search } from "vant";
import { getSeachApi } from "@/api/search.js";
import { debounce } from "@/components/vue-global/index.js";
export default {
  name: "Search",
  data() {
    return {
      value: "", //搜索框数据
      searchResult: [],
      searchHistory: [],
      hotword: "爱",
      search_history: false,
    };
  },
  components: {
    [Search.name]: Search,
  },
  created() {
    // 查看本地存储有没有数据
    let searchHistory = localStorage.getItem("searchHistory");
    if (searchHistory) {
      this.searchHistory = JSON.parse(searchHistory) || [];
    }
  },
  methods: {
    // 回车搜索
    onSearch(val) {
      val = val.trim();
      val = val || this.hotword;

      this.searchResultTap(val);
    },
    // 搜索结果文本
    inputSearch: debounce(function (val) {
      val = val.trim();
      if (val.length === 0) {
        this.searchResult = [];
        return;
      }
      // 判断搜索文本是否重复
      if (val >= 0) {
        this.searchHistory.splice(val, 1);
      }
      getSeachApi({ key_word: val }).then((res) => {
        if (res.code == 0) {
          this.searchResult = res.data;
        }
      });
    }),
    // 搜索结果点击事件
    searchResultTap(title) {
      title = title.trim(); //
      // 页面历史记录
      // 本地存储记录
      // 判断历史记录是否有重复，如果有重复把之前的删除再添加
      let index = this.searchHistory.findIndex((v) => v === title);
      if (index >= 0) {
        this.searchHistory.splice(index, 1);
      }
      this.searchHistory.unshift(title);
      localStorage.setItem("searchHistory", JSON.stringify(this.searchHistory));
      this.$router.push("/searchList?key_word=" + title);
    },
    // 删除当前点击索引值
    del(index) {
      this.searchHistory.splice(index, 1);
      localStorage.setItem("searchHistory", JSON.stringify(this.searchHistory));
    },
    // 删除全部索引值
    Delete() {
      this.searchHistory = [];
      localStorage.setItem("searchHistory", JSON.stringify([]));
    },
    // 历史记录点击
    historyTap(title) {
      this.searchResultTap(title);
    },
  },
};
</script>

<style lang="less" scoped>
.van-search{
  background-color: #8b69a9;
  .van-search__action{
    color: #fff;
  }
}
.search-result {
  position: fixed;
  left: 0;
  right: 0;
  top: 54px;
  bottom: 0;
  overflow-y: auto;
  background-color: #f4f4f4;
  z-index: 999;
}
</style>